<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监听属性</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    <h1>1. 监听普通变量值<hr></h1>
    <input type="text" v-model="message">
    <h1>2. 监听对象变量值（深度监听）<hr></h1>
    {{student}}
    学生姓名：<input type="text" v-model="student.sname"> <br>
    <h1>3. 按键修饰符<hr></h1>
    <h3>3.1 按下某个键时 </h3>
    <input type="text" @keyup.enter="enterHandler" v-model="str">
    <h3>3.2 按下组合键时 </h3>
    <input type="text" @keyup.ctrl.shift.m="ctrlshiftMHandler">
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '.d1',
    data:{
      message: 'hello',
      str: '',
      student: {
        "sid":1001,
        "sname": '张三',
        "addr": '上海'
      }
    },
    methods:{
      // 1. 按下回车键后
      enterHandler(){
        console.log("按下键盘的回车键后！")
        console.log("str:",this.str)
      },
      // 2. 按下ctrl+shift+l键后：
      ctrlshiftMHandler(){
        console.log("按下ctrl+shift+M键")
      }
    },
    computed:{
      // sname(){
      //   return this.student.sname
      // }
    },
    watch:{
      // 1.监听普通属性值
      message(newV,oldV){
        console.log("旧值：",oldV)
        console.log("新值：",newV)
      },
      // 2. 监听复杂属性值
      // 1. 监听整个对象，对象中的某个属性发生改变都会触发
      // student:{
      // 此种写法只能得到newV,此时的oldV与newV值是一样的,虽然如此，因每次访问后台都是最新的值，所以不影响使用。
      //   handler(newV,oldV){
      //     console.log("student->旧值：",oldV)
      //     console.log("student->新值：",newV)
      //   },
      //   deep:true,            // 开启深度监听
        // immediate: true,      // 页面加载时就执行一次监听操作
      // }
      // 2. 下面两种写法只是监听student对象的sname属性
      // 写法一：下面的写法需要配合计算属性
      // sname(newV,oldV){
      //   console.log("旧值：",oldV)
      //   console.log("新值：",newV)
      // }
      // 写法二：如果监听的是对象属性，可以直接写到字符串中
      // "student.sname"(newV,oldV){
      //     console.log("字符串写法监听-旧值：",oldV)
      //     console.log("字符串写法监听-新值：",newV)
      // }
    }
  })
</script>
